<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">结算中心</block>
		</cu-custom>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view class="grid col-2">
							<view>外卖订单</view>
							<view class="text-right">预计送达:2020-04-27 15:40</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view>小菜猿(合肥万象城店)<text class="cuIcon-right"></text></view>
						<view class="padding-top-xs text-grey">距离您：275m</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view>安徽省合肥市蜀山区潜山路与习友路交口汇处西北侧 华润万象城</view>
						<view class="padding-top-xs text-grey">孙先生  17355556666</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view style="border-bottom: 2upx solid #eeeeee;" class="padding-bottom-xs text-bold">支付方式</view>
						<view class="padding-top">
							<view class="grid col-2">
								<view>线上支付</view>
								<view class="text-right"><text class="text-orange text-lg cuIcon-roundcheck"></text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view style="border-bottom: 2upx solid #eeeeee;" class="padding-bottom-xs text-bold">优惠信息</view>
						<view class="padding-top">
							<view class="grid col-2">
								<view class="text-grey">满￥79，优惠￥30</view>
								<view class="text-right"><text class="text-orange text-lg cuIcon-roundcheck"></text></view>
							</view>
							<view class="text-right padding-top-xs">优惠金额：￥30.0</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>


		
		
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view style="border-bottom: 2upx solid #eeeeee;" class="padding-bottom-xs text-bold">餐品信息</view>
						<view class="padding-top">
							<view class="flex padding-bottom-sm" v-for="(food,index) in foods" :key="index">
								<view class="flex-treble">{{food.title1}}</view>
								<view class="flex-sub text-right text-orange">{{food.num}}份</view>
								<view class="flex-sub text-right text-orange">￥{{food.price*food.num}}</view>
							</view>
							
							<view class="flex padding-top-sm" style="border-top: 2upx solid #eeeeee;">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">共{{totalNum}}份</view>
								<view class="flex-sub text-right">￥{{totalPrice}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view class="padding-top">
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">配送费</view>
								<view class="flex-sub text-right text-orange">￥6</view>
							</view>
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">餐盒费</view>
								<view class="flex-sub text-right text-orange">￥0</view>
							</view>
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">合计</view>
								<view class="flex-sub text-right text-orange">￥{{totalPrice+6}}</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group margin-tb-xs" style="margin-bottom: 200upx;">
			<view class="title">顾客备注</view>
			<input placeholder="请输入您的要求" name="input"></input>
		</view>
		
		<view class="cu-bar  tabbar foot" style="background-color: #f1f1f1;">
			<view class="grid col-2" style="width: 100%;">
				<view style="width: 60%;" class="text-left padding-left margin-top">
					<text class="text-orange" style="font-size: 40upx;">{{totalPrice+6}}</text>
					<text class="padding-left">共{{totalNum}}份</text>
				</view>
			
				<view style="width: 40%;">
					<button class="cu-btn bg-orange block text-lg" style="height: 50px;" @tap="pay">支  付</button>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basics: 0,
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '待支付'
				}, {
					cuIcon: 'radioboxfill',
					name: '订单发送'
				}, {
					cuIcon: 'radioboxfill',
					name: '商家确认'
				}, {
					cuIcon: 'radioboxfill',
					name: '备餐中'
				},{
					cuIcon: 'radioboxfill',
					name: '配送中'
				},{
					cuIcon: 'radioboxfill',
					name: '订单完成'
				}],
				state: 0,
				foods: []
			}
		},
		computed:{
		  totalPrice(){
		    let totalPrice = 0;
			for (var i = 0; i < this.foods.length; i++) {
				totalPrice += this.foods[i]["num"]*this.foods[i]["price"];
			}
		    return totalPrice-30
		  },
		  totalNum(){
		    let totalNum = 0;
			for (var i = 0; i < this.foods.length; i++) {
				totalNum += this.foods[i]["num"];
			}
		    return totalNum
		  }
		},
		onLoad(options) {
			this.state = options.state;
			this.foods = JSON.parse(decodeURIComponent(options['foods']));
			console.log(this.foods)
			//this.state = 1;
		},
		methods: {
			call(){
				uni.makePhoneCall({
				    phoneNumber: '0551-62148111' //仅为示例
				});
			},
			pay(){
				uni.showModal({
					title:"提示",
					content:"演示程序，无法调用支付接口"
				})
			}
		}
	}
</script>

<style>

</style>
